<template>
    <div class="icon-component-container">
        <n-carousel height="190px" :initialIndex="3" ref="carouselRef">
            <n-carousel-item v-for="item in sizeList">
                <iconItem :size="item" :bgColor="bgColor" @add="handleAdd">
                   <div class="flex-center" w-full h-full>
                     <img :src="imgUrl" alt="" h-full @click="showModal">
                   </div>
                </iconItem>
            </n-carousel-item>
        </n-carousel>
        <dModal ref="modalRef">
            <iframe :src="iframeUrl" frameborder="0" h-full w-full></iframe>
        </dModal>
    </div>
</template>

<script setup lang="ts">
import iconItem from '@/components/carousel/item/iconItem.vue';
import dModal from '@/components/modal/index.vue'
import { useModal } from '@/components/modal'
import { NCarouselType } from '@/components/interface/main';

const emits = defineEmits(['add'])

const props = defineProps({
    imgUrl:String,
    bgColor:String,
    iframeUrl:String
})

const sizeList = ['1x1','1x2','2x1','2x2','2x4']

const {
    modalRef,
    showModal,
} = useModal()

const handleAdd = () => {
    emits('add')
}

const carouselRef = ref<NCarouselType>()
const getIconSize = () => {
    return sizeList[carouselRef.value!.currentIndex]
}

defineExpose({
    getIconSize
})
</script>

<style scoped lang="scss">
</style>